<style scoped>
  .mint-navbar{
    border-bottom: 1px solid #e9e9e9;
    box-sizing: border-box;
  }
  .mint-navbar .mint-tab-item:last-child p{
    border:none;
  }
  .mint-navbar .mint-tab-item.is-selected{
    border:none;
  }
  .mint-navbar .mint-tab-item.is-selected span{
    border-bottom: 3px solid #91A5F8;
    color: #4D66FF;
    padding: 0 0 5px 0;
  }
  .mint-navbar .mint-tab-item{
    padding: 10px 0;
  }
  .laboratory{
    height:100%;
    background: #edf1f5;
  }
  /*往期实验*/
  .detail>div:first-child{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:16px 10px;
    background: #ffffff;
  }
  .detail h3:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mt-progress{
    height:0;
    line-height: 0;
  }
  .all-lab{
    margin-top:30px;
    background: #ffffff;
  }
  .all-lab ul{
    display: flex;
    flex-direction: column;
  }
  .all-lab ul li{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #e9e9e9;
    padding: 6px 10px;
    align-items: center;
  }
  .all-lab ul li small{
    color: rgba(102,102,102,0.5);
  }
  .all-lab ul li .right p{
    color: #ffffff;
    background: #7590FF;
    border-radius: 8px;
    padding: 6px 10px;
  }
</style>
<style>
  .mt-progress .mt-progress-progress{
    background-color: #4D66FF!important;
  }
  .mint-navbar .mint-tab-item .mint-tab-item-label{
    border-right:1px solid #e9e9e9;
  }
  .mint-navbar .mint-tab-item:last-child .mint-tab-item-label{
    border:none;
  }
</style>
<template>
  <div class="laboratory">
    <my-sys></my-sys>
    <div class="main">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1"><span>往期实验</span></mt-tab-item>
        <mt-tab-item id="2"><span>创建实验</span></mt-tab-item>
      </mt-navbar>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div class="detail">
            <div>
              <h3>量化极客8个字</h3>
              <h3>77<h4>%</h4></h3>
            </div>
            <mt-progress :value=value :bar-height="5"></mt-progress>
          </div>
          <div class="all-lab">
            <ul>
              <li>
                <div class="left">
                  <h3>量化极客八个字名</h3>
                  <small>017-4-17 13:56</small>
                </div>
                <div class="right">
                  <p>查看结果</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <h3>量化极客八个字名</h3>
                  <small>017-4-17 13:56</small>
                </div>
                <div class="right">
                  <p>查看结果</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <h3>量化极客八个字名</h3>
                  <small>017-4-17 13:56</small>
                </div>
                <div class="right">
                  <p>查看结果</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <h3>量化极客八个字名</h3>
                  <small>017-4-17 13:56</small>
                </div>
                <div class="right">
                  <p>查看结果</p>
                </div>
              </li>
            </ul>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">

        </mt-tab-container-item>
      </mt-tab-container>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
  import mySys from '../components/sys.vue'
  import { Navbar, TabItem } from 'mint-ui';
  import { TabContainer, TabContainerItem } from 'mint-ui'
  import myFooter from '../components/footer.vue'
  import { Progress } from 'mint-ui'
  export default {
    components: {
      mySys,
      mtTabContainer: TabContainer,
      mtTabContainerItem: TabContainerItem,
      mtNavbar: Navbar,
      mtTabItem: TabItem,
      myFooter,
      mtProgress: Progress
    },
    data () {
      return {
        selected: "1",
        value: "77"
      }
    }
  }
</script>
